import { defineComponent, ref, watch, PropType, reactive } from 'vue'
import { Tmode } from '../index'
import { addPermissionData, editPermissionData } from '@/api/permission'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'

const props = {
  visible: {
    type: Boolean,
    required: true
  },
  mode: {
    type: String as PropType<Tmode>,
    required: true
  },
  modalData: {
    type: Object as PropType<FormState>,
    default: {}
  },
  onGetData: {
    type: Function
  }
}

export interface FormState {
  name: string
  code: string
  description: string
  enVisible: string
  type: number
  pid?: string
  id?: string
}

export default defineComponent({
  name: 'Model',
  props,
  emits: ['update:visible', 'update:mode', 'GetData'],
  setup(props, { emit }) {
    const formRef = ref<FormInstance>()
    let formState = reactive<FormState>({
      name: '',
      code: '',
      description: '',
      enVisible: '1',
      pid: '',
      type: 1
    })
    const handleOk = () => {
      formRef.value?.validateFields().then(async () => {
        {
          if (props.mode === 'add') {
            await addPermissionData(formState)
            message.success('添加成功')
          } else if (props.mode === 'edit') {
            await editPermissionData(formState)
            message.success('修改成功')
          }
          emit('update:visible', false)
          emit('GetData')
        }
      })
    }
    const handlenAfterClose = () => {
      formState = reactive<FormState>({
        name: '',
        code: '',
        description: '',
        enVisible: '1',
        pid: '',
        type: 1
      })
      emit('update:mode', '')
    }

    watch(
      () => props.mode,
      (v) => {
        if (v === 'add') {
          ;(formState.type = 2), (formState.pid = props.modalData.id)
        }
        if (v === 'edit') {
          formState = reactive<FormState>({
            ...props.modalData
          })
        }
      }
    )

    const handlenCancel = () => {
      formRef.value?.resetFields()
      emit('update:visible', false)
    }

    return () => (
      <>
        <a-modal
          visible={props.visible}
          title={props.mode === 'add' ? '添加' : '编辑'}
          onOk={handleOk}
          onCancel={handlenCancel}
          afterClose={handlenAfterClose}
        >
          <a-form
            model={formState}
            ref={formRef}
            name="basic"
            label-col={{ span: 6 }}
            wrapper-col={{ span: 16 }}
            autocomplete="off"
          >
            <a-form-item
              label="权限名称"
              name="name"
              rules={[{ required: true, message: '必填' }]}
            >
              <a-input v-model:value={formState.name} />
            </a-form-item>
            <a-form-item
              label="权限标识"
              name="code"
              rules={[{ required: true, message: '必填' }]}
            >
              <a-input v-model:value={formState.code} />
            </a-form-item>
            <a-form-item
              label="权限描述"
              name="description"
              rules={[{ required: true, message: '必填' }]}
            >
              <a-input v-model:value={formState.description} />
            </a-form-item>
            <a-form-item label="开启" name="enVisible">
              <a-switch
                v-model:checked={formState.enVisible}
                checkedValue="1"
                unCheckedValue="0"
              />
            </a-form-item>
          </a-form>
        </a-modal>
      </>
    )
  }
})
